// 定义一个商品对象，包含价格和数量
let product = {
  price: 10,
  quantity: 2,
};

// new Proxy 接收两个参数（被代理对象，handler 对象）。
// 生成 proxy 代理对象实例，该实例拥有《被代理对象的所有属性》 ，并且可以被监听 getter 和 setter
// 此时：product 被称为《被代理对象》，proxyProduct 被称为《代理对象》
const proxyProduct = new Proxy(product, {
  // 监听 proxyProduct 的 set 方法，在 proxyProduct.xx = xx 时，被触发
  // 接收四个参数：被代理对象 tager，指定的属性名 key，新值 newVal，最初被调用的对象 receiver
  // 返回值为一个 boolean 类型，true 表示属性设置成功
  set(target, key, newVal, receiver) {
    // 为 target 附新值
    target[key] = newVal;
    // 触发 effect 重新计算
    effect();
    return true;
  },
  // 监听 proxyProduct 的 get 方法，在 proxyProduct.xx 时，被触发
  // 接收三个参数：被代理对象 tager，指定的属性名 key，最初被调用的对象 receiver
  // 返回值为 proxyProduct.xx 的结果
  get(target, key, receiver) {
    return target[key];
  },
});

// 总价格
let total = 0;
// 计算总价格的匿名函数
let effect = () => {
  total = proxyProduct.price * proxyProduct.quantity;
};

// 第一次打印
effect();
console.log(`总价格：${total}`); // 总价格：20
